<template>
	<view class="container relative">
		<Gap height="30rpx" />
		<view class="headers w-94 flex">
			<view class="mt-3">
				<image :src="userInfo.avatar" mode="aspectFit" class=" w-14 h-14 ml-9 rounded-full" />
			</view>
			<view class="mt-3 ml-2 text-white flex flex-col w-full">
				<text class="my-1 font-bold">{{ userInfo.nickname }}</text>
				<text class="my-1" v-if="!userInfo.is_vip">尚未开通VIP会员</text>
				<text class="my-1" v-else>会员：{{ uiwu.formatTimestamp(userInfo.vip_expire_time * 1000) }}到期</text>
				<navigator class=" text-right pr-6 mt-7" hover-class="none" url="/pages/member/record">开通记录</navigator>
			</view>
		</view>
		<Gap height="30rpx" />
		<view class="content w-94 flex bg-white rounded-xl flex-col items-center">
			<Gap height="16rpx" />
			<view class="flex justify-between w-94">
				<text class=" text-base font-bold">会员专享权益</text>
				<image src="@/static/image/zhuyi.png" mode="aspectFit" class="w-6 h-6"
					@tap.stop="uiwu.openWindow('/pages/member/equity')" />
			</view>
			<Gap height="30rpx" />
			<view class="w-94 flex">
				<image src="@/static/image/card.png" mode="aspectFit" class="card" />
			</view>
		</view>

		<view class="btns absolute bottom-0  flex flex-col ">
			<!-- #ifdef APP-PLUS -->
			<view class="uiwu-tips uiwu-flex-center">
				<radio style="transform: scale(0.8);" color="#EF821E" :checked="isRadio" @tap="isRadio = !isRadio" />
				开通即表明同意 <navigator url="/pages/member/equity" style="color: #EF821E;">会员权益</navigator>
			</view>
			<!-- #endif -->
			<view class="image flex justify-center items-center text-white font-bold mb-8" @tap.stop="submit">
				立即开通<text class=" line-through">￥{{
					member_ship.price }}</text>/月
				￥{{ member_ship.pre_price }}
			</view>
		</view>
	</view>
	<Payment :isShowCoupon="false" :items="itemInfo" v-model="showModel" v-if="showModel" @confirm="confirm" />
</template>


<script setup lang="ts">
import { apiIosPayStatus, memberActivate, memberlist, uiwu } from '@/api/interface/interface';
import { userStore } from '@/store/userStore';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { provide, ref, toRefs } from "vue";
import Gap from '@/components/gap.vue';
import Payment from '@/components/payment.vue';
const { updateUserInfo } = userStore();
const itemInfo = ref({});
const { userInfo } = toRefs(userStore());

// const userInfo = computed(() => {
// 	const { userInfo } = userStore();
// 	console.log(userInfo, "userInfo");
// 	return userInfo;
// })
const showModel = ref<boolean>(false)
const member_right = ref<Array<object>>([])
const member_ship = ref<any>({})
const isRadio = ref(false);
const submit = async () => {
	// #ifdef APP-PLUS
	if (!isRadio.value) return uiwu.toast('请先勾会员权益');
	if (uiwu.system() == 'ios') {
		uiwu.loading('获取订单信息...', true)
		const { data: { pay_info: { productid, order_id } } } = await memberActivate({
			member_ship_id: member_ship.value.id,
			pay_type: 'ios'
		})
		const { transactionReceipt } = await uiwu.applePay({
			productid,
			order_id
		})
		const result = await apiIosPayStatus({
			receipt: transactionReceipt,
			order_id: order_id,
			status: 0,
			type: 'member'
		})
		if (!result) return
		uiwu.toast('开通成功')
		uiwu.hideloading()
		updateUserInfo()
		return
	}
	showModel.value = true
	// #endif
	// #ifdef MP-WEIXIN || WEB
	showModel.value = true
	// #endif

	// #ifdef MP-TOUTIAO
	const { data: { pay_info } } = await memberActivate({
		member_ship_id: member_ship.value.id,
		pay_type: 'douyin'
	})
	if (!pay_info) return
	uni.requestPayment({
		orderInfo: {
			order_id: pay_info.order_id,
			order_token: pay_info.order_token
		},
		service: 5,
		success: (res) => {
			if (res.code === 0) {
				uiwu.toast('充值成功')
				updateUserInfo()
			} else {
				uiwu.toast('充值失败')
			}
		},
		fail: (err) => {
			console.log(err);
		}
	})
	// #endif
}
const getMemberlist = async (): Promise<any> => {
	const { data } = await memberlist();
	member_right.value = data.member_right;
	member_ship.value = data.member_ship
}

const confirm = async (pay_type: any): Promise<any> => {
	uiwu.loading('支付中...', true)
	let code = null;
	// #ifndef WEB
	if (pay_type == 'weixin') code = await getWeiXinCode()
	// #endif
	const { data: { pay_info } } = await memberActivate({
		member_ship_id: member_ship.value.id,
		pay_type,
		routine_code: code
	})
	if (!pay_info) return
	if (pay_type != 'weixin') {
		uiwu.ailpay(pay_info).then(() => {
			uiwu.hideloading()
			setTimeout(() => {
				uiwu.toast('支付成功')

			})
		}).catch(() => {
			uiwu.hideloading()
			uiwu.toast('支付取消')
		})
	} else {
		uiwu.wxpay(pay_info).then((res) => {
			uiwu.hideloading()
			setTimeout(() => {
				uiwu.toast('支付成功')
				updateUserInfo()
			})
		})
	}
}
/**
 * 获取code
 */
const getWeiXinCode = () => {
	return new Promise((resolve, reject) => {
		uni.login({
			provider: 'weixin',
			success: ({ code }) => {
				resolve(code)
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}
onLoad(() => {
	provide("itemInfo", itemInfo);
	getMemberlist()
});
onShow(() => {
	updateUserInfo();
});
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background-color: $qj-bg-color;

	.headers {
		background: url("@/static/image/vip-bg.png") no-repeat;
		background-size: 100% 100%;
		height: 132px;
	}

	.content {
		height: 168px;

		.card {
			width: 158px;
			height: 84px;
		}
	}

	.btns {
		.image {
			width: 276px;
			height: 52px;
			background: url("@/static/image/button.png") no-repeat;
			background-size: 100% 100%;

		}
	}

}
</style>